/**
 * Created by oiuyt on 2018/7/18.
 */
import React, { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';

const { Header, Sider, Content } = Layout;

class HomeLayout extends Component {
        state = {
                collapsed: false,
        };

        toggle = () => {
                this.setState({
                        collapsed: !this.state.collapsed,
                });
        }

        render() {
                return (
                    <Layout id="homeLayout">
                            <Sider
                                trigger={null}
                                collapsible
                                collapsed={this.state.collapsed}
                            >
                                    <div className="logo" />
                                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                                            <Menu.Item key="1">
                                                    <Icon type="user" />
                                                    <span>nav 1</span>
                                            </Menu.Item>
                                            <Menu.Item key="2">
                                                    <Icon type="video-camera" />
                                                    <span>nav 2</span>
                                            </Menu.Item>
                                            <Menu.Item key="3">
                                                    <Icon type="upload" />
                                                    <span>nav 3</span>
                                            </Menu.Item>
                                    </Menu>
                            </Sider>
                            <Layout style={{marginLeft: (this.state.collapsed)?"80px" : "200px"}}>
                                    <Header style={{ background: '#fff', padding: 0 }}>
                                            <Icon
                                                className="trigger"
                                                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                                onClick={this.toggle}
                                            />
                                    </Header>
                                    <Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280,}}>

                                            Content
                                            <br/>

                                    </Content>
                            </Layout>
                    </Layout>
                );
        }
}
export default HomeLayout